<template>
  <view>
    <view class="status_bar"></view>
    <view class="mark">
      <!-- :class="[isActive ?  : heise]" -->
      <view class="header bg-c3">
        <text class="title fs32 c1">朋友</text>
        <view @tap="TOCity" class="icon-item iconfont">
          <image src="../../../static/images/friend/firend.png"></image>
        </view>
        <view @click.stop="bindClick('1')" class="icon-item iconfont qipao">
          <image src="../../../static/images/friend/add.png"></image>
        </view>
      </view>

      <!-- <view class="bubble">

      </view>-->
 
      <maskshow
        :show="show1"
        @close="closeModal('1')"
        content="这里是正文内容，这里是正文内容，这里是正文内容，这里是正文内容，这里是正文内容，这里是正文内容"
      ></maskshow>

      <view class="search bg-c1">
        <input type="text" placeholder="搜索">
        <view class="grace-iconfont icon-search fs30 c7"></view>
      </view>

      <view class="nav bg-c1">
        <navigator url="../../FriendPage/addFriends/addFriends" class="nav-item bd-r" hover-class="none">
          <view class="friend-icon icon">
            <image src="../../../static/images/friend/add-friend.png"></image>
          </view>
          <text class="text1 fs28 lh-h1">添加朋友</text>
          <text class="fs24 c5 lh-fs28">和朋友一起聊天</text>
        </navigator>
        <navigator url="../../FriendPage/city/city" class="nav-item bd-r" hover-class="none">
          <view class="txl-icon icon">
            <image src="../../../static/images/friend/tongxun.png"></image>
          </view>
          <text class="text1 fs28 lh-h1">通讯录</text>
          <text class="fs24 c5">已添加的好友</text>
        </navigator>
        <navigator class="nav-item" hover-class="none">
          <view class="circle-icon icon">
            <image src="../../../static/images/friend/circle.png"></image>
          </view>
          <text class="text1 fs28 lh-h1">生活圈</text>
          <text class="fs24 c5">和朋友分享生活</text>
        </navigator>
      </view>

      <view class="txl-list bg-c1" id="txl-content">
        <view class="txl-item" v-for="(item,index) in friendList" :key="index">
          <view class="photo">
            <image :src="item.image"></image>
          </view>
          <view class="item-right">
            <view class="group">
              <text class="text1 fs30">{{item.name}}</text>
              <text class="text2 fs24 c5">{{item.explain}}</text>
            </view>
            <view class="time">
              <text class="fs24 c5">{{item.time}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import POPALERT from "../../test/qipao";
import maskshow from "@/components/maskshow";
export default {
  data() {
    return {
      friendList: [
        {
          name: "张学友",
          explain: "演唱会定于下一周",
          time: "2018/11/12",
          image:
            "http://pic.51yuansu.com/pic3/cover/02/09/02/599e76d06afd7_610.jpg"
        },
        {
          name: "五月天",
          explain: "你不是真正的快乐",
          time: "2019.22/22",
          image:
            "http://pic.51yuansu.com/pic3/cover/02/09/02/599e76d06afd7_610.jpg"
        },
        {
          name: "张学友",
          explain: "演唱会定于下一周",
          time: "1991/11/11",
          image:
            "http://pic.51yuansu.com/pic3/cover/02/09/02/599e76d06afd7_610.jpg"
        },
        {
          name: "XXX",
          explain: "3435435645..",
          time: "1986/02/08",
          image:
            "http://pic.51yuansu.com/pic3/cover/02/09/02/599e76d06afd7_610.jpg"
        }
      ],
      show: false,
      show1: false,
      isActive: true
    };
  },
  onLoad() {
    uni.getSystemInfo({
      success: res => {
        console.log(res.statusBarHeight);
      }
    });
    console.log(1);
  },
  methods: {
    TOCity() {
      uni.navigateTo({
        url: "../../FriendPage/city/city"
      });
    },
    bubble() {
      this.show = !this.show;
      console.log(this.show);
      console.log(11111);
    },
    bindClick(type) {
      // plus.navigator.setStatusBarBackground("#f40");
      console.log(this[`show${type}`]);
      this[`show${type}`] = !this[`show${type}`];
      console.log(this[`show${type}`]);
      this.isActive = !this.isActive;
      uni.setTabBarStyle({
        backgroundColor: "#C1C0BF"
      });

    // plus.navigator.setStatusBarBackground("#C1C0BF");
      // var wd=plus.webview.create('./index','dcloud',{mask:'rgba(0,0,0,0.5)'});
      // wd.show();

      //  const ws = plus.webview.currentWebview();
      // 显示遮罩层
      // ws.setStyle({mask:'rgba(0,0,0,0.5)'});
    },
    closeModal(type) {
      console.log(`监听到close`);
      this[`show${type}`] = false;
      this.isActive = !this.isActive;
      // const ws = plus.webview.currentWebview();
      // ws.setStyle({mask:'none'});
      uni.setTabBarStyle({
        backgroundColor: "#FFFFFF"
      });
    //  plus.navigator.setStatusBarBackground("#C1C0BF");
    }
  
  },
  computed: {
    stylecolor() {
      var systemInfo = uni.getSystemInfoSync();
      var screenHeight = systemInfo.screenHeight;
      return `height:${screenHeight}px`;
    }
  },
  components: {
    POPALERT,
    maskshow
  },
  onUnload() {
    console.log(12);
  },
  onLoad() {
    console.log("onload");
    // plus.navigator.setStatusBarBackground("#C1C0BF");
    // var pages = getCurrentPages();
    // // console.log(JSON.stringify(pages));

    // var page = pages[pages.length - 1];
    // // #ifdef APP-PLUS
    // var currentWebview = page.$getAppWebview();
    // // console.log(JSON.stringify(currentWebview));
    // console.log(JSON.stringify(currentWebview));

    // console.log(currentWebview.id);
    // currentWebview.setStyle({
    //     titleNView:{
    //         titleText:"test"
    //     }
    // });
    // #endif
  },
  onHide() {
    //页面隐藏的时候触发关闭遮罩层,
    this.closeModal(1)
  }
};
</script>


<style lang="scss">
@import "../../../styles/global/index";
.status_bar {
  height: var(--status-bar-height);
  width: 100%;
  background: #2081CE;
}
// .mark {
//   position: absolute;
//   top: 0;
//   left: 0;
//   background: #3a3734;
//   z-index: 999999;
// }
.heise {
  background: red;
}
.qipao {
  position: relative;
  //   .ceshi {
  //   position: absolute;
  //   top: 0px;
  //   right: 120px;
  //   z-index: 99999999999999999999 !important;
  //  }
  // .tooltip{
  //     position: absolute;
  //   top: 0px;
  //   right: 120px;
  //   z-index: 99999999999999999999 !important;
  // }
}

.header {
  flex: 1;
  height: 100upx;
  position: relative;
  text-align: center;
  font-weight: 700;

  .title {
    line-height: 100upx;
  }

  .icon-item {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50upx;
    height: 50upx;
    image {
      @include size(100%, 100%);
      color: #fff;
    }
  }

  .icon-item:nth-of-type(1) {
    right: 120upx;
  }

  .icon-item:nth-of-type(2) {
    right: 40upx;
  }
}

.search {
  position: relative;
  padding: 25upx;

  input {
    background: #f7f7f7;
    height: 50upx;
    padding-left: 80upx;
    border: 0;
  }

  .grace-iconfont {
    position: absolute;
    left: 40upx;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
  }
}

.nav {
  display: flex;
  height: 200upx;
  padding: 10upx 0;

  .nav-item {
    width: 33.3%;
    height: 100%;
    @include flex-cl;

    .icon {
      width: 60upx;
      height: 60upx;
      margin-bottom: 20upx;
      image {
        @include size(100%, 100%);
      }
    }
  }
}

.txl-list {
  margin-top: 20upx;
  padding: 0 40upx;

  .txl-item {
    height: 110upx;
    display: flex;
    align-items: center;
    padding: 10upx 0;

    .photo {
      width: 80upx;
      height: 80upx;

      image {
        @include size(100%, 100%);
      }
    }

    .item-right {
      position: relative;
      height: 100upx;
      flex: 1;
      margin-left: 30upx;
      border-bottom: 1px solid #eee;
      padding: 8upx 0;

      .group {
        padding-top: 18upx;
        line-height: 1;
        @include flex-cl-notc;
        .text2 {
          height: 40upx;
          line-height: 40upx;
          margin-top: 8upx;
        }
      }

      .time {
        height: 40upx;
        line-height: 40upx;
        width: 160upx;
        position: absolute;
        right: 10upx;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    &:nth-last-of-type(1) .item-right {
      border: 0;
    }
  }
}
</style>